<template>
  <div class="user-container app-container">
    <div class="filter-container">
      <el-input
        v-model="listQuery.id_public_user_info"
        placeholder="请输入用户ID"
        clearable
        class="filter-item input-item"
        style="width: 200px"
        @clear="handleFilter"
        @keyup.enter.native="handleFilter"
      />
      <el-input
        v-model="listQuery.nick_name_like"
        placeholder="请输入姓名"
        clearable
        class="filter-item input-item"
        style="width: 200px"
        @clear="handleFilter"
        @keyup.enter.native="handleFilter"
      />
      <el-input
        v-model="listQuery.user_phone_like"
        placeholder="请输入手机号"
        clearable
        class="filter-item input-item"
        style="width: 200px"
        @clear="handleFilter"
        @keyup.enter.native="handleFilter"
      />
      <el-button
        v-waves
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
      >
        搜索
      </el-button>
    </div>
    <div class="page-content">
      <el-table
        :key="0"
        v-loading="listLoading"
        :data="list"
        border
        fit
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column
          label="ID"
          prop="id"
          align="center"
          width="80"
          :class-name="getSortClass('id')"
        >
          <template slot-scope="{ row }">
            <span>{{ row.id_public_user_info || "暂无" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="头像" align="center">
          <template slot-scope="{ row }">
            <el-image :src="row.weichat_img" style="width: 157px; height: 76px">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </template>
        </el-table-column>

        <el-table-column label="姓名" align="center">
          <template slot-scope="{ row }">
            {{ row.nick_name }}
          </template>
        </el-table-column>

        <el-table-column label="手机号" align="center">
          <template slot-scope="{ row }">
            {{ row.user_phone | showUserPhone }}
          </template>
        </el-table-column>
        <el-table-column label="注册时间" align="center">
          <template slot-scope="{ row }">
            {{ row.time_register }}
          </template>
        </el-table-column>

        <el-table-column
          label="操作"
          align="center"
          width="350"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="{ row }">
            <el-button type="text" size="mini" @click="handleDetails(row)">
              详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="currentPage"
      :limit.sync="listQuery.limit"
      @pagination="getPageList"
    />
  </div>
</template>

<script>
import waves from "@/directive/waves"; // waves directive
import Pagination from "@/components/Pagination";
import { userList } from "@/api/user";
export default {
  name: "User",
  directives: { waves },
  components: {
    Pagination,
  },
  data() {
    return {
      listQuery: {
        invoke_method: "public_page_4m_load_user_list",
        pre_db_para_is_online: 0,
        pre_db_para_order_by_para: "register_time desc",
        pre_db_para_begin_idx: 0,
        pre_db_para_length_4_list: 10,
        pre_cmd_para_show_integral_user_info: true,
        pre_cmd_para_show_transaction_num_order_detail: true,
        pre_cmd_para_show_mutual_grading_user_info: true,
        pre_cmd_para_show_recomm_lesson: true,
        nick_name_like: null,
        user_phone_like: null,
        id_public_user_info: null,
      },
      listLoading: false,
      list: [],
      total: 1,
      currentPage: 1,
    };
  },
  filters: {
    showUserPhone(val) {
      if (!val || val == -1) {
        return "";
      }
      return val;
    },
  },
  mounted() {
    this.getList();
    // this.getShopData();
  },
  methods: {
    /*
     * 获取页面数据
     * */
    getList() {
      this.listLoading = true;
      let tmpListQuery = Object.assign({}, this.listQuery);

      userList(this.Qs.stringify(tmpListQuery)).then((response) => {
        this.list = response.page_content;
        this.total = response.result_num;
        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false;
        }, 0.5 * 1000);
      });
    },
    /*
     * 查询数据
     * */
    handleFilter() {
      this.listQuery.pre_db_para_begin_idx = 0;
      this.getList();
    },
    /*
     * 点击分页进行查询
     * */
    getPageList(val) {
      this.listQuery.pre_db_para_begin_idx =
        (val.page - 1) * this.listQuery.pre_db_para_length_4_list;
      this.getList();
    },
    // 刷新页面数据
    onRefresh() {},

    /*
     * 表格样式
     * */
    getSortClass: function (key) {
      const sort = this.listQuery.sort;
      return sort === `+${key}` ? "ascending" : "descending";
    },
    /*
     * 查看详情
     * */
    handleDetails(item) {
      this.$router.push({
        path: "/userDetails",
        query: { id: item.id_public_user_info },
      });
    },
    // 删除用户信息
    handleDelete(item){
      let userData={
        invoke_method: "change_user_info",
        pre_db_para_id_public_user_info:item.id_public_user_info,
        is_online:111,
      }
      let randData=1000+parseInt(Math.random()*9000);
      if(item.id_sns){
        userData.id_sns=`*${item.id_sns}_${randData}*`
        userData.id_lite_pro=`*${item.id_lite_pro.substring(0,5)}_${randData}*`
      }
      userList(this.Qs.stringify(userData)).then((res) => {
        this.$notify({
          title: "Success",
          message: "删除成功",
          type: "success",
          duration: 2000,
        });
        this.getList();
      });

    }
  },
};
</script>

<style lang="scss" scoped>
.col-coach-102 {
  color: #29ae6d;
}
.col-coach-202 {
  color: #db1010;
}
.col-coach-302 {
  color: #db1010;
}
</style>
